<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="vuex.js"></script>
</head>
<body>
<div id="hd">
<lists></lists>
</div>
<script type="text/x-template" id="tp">
<div class="container">
    <table class="table table-condensed table-hover">
    	<thead>
    		<tr>
    			<th>商品名称</th>
                <th>商品价格</th>
                <th>商品商品数量</th>
                <th>商品价格小计</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    		</tr>
    	</tbody>
    </table>
</div>
</script>
<script>
    let lists={
        template:'#tp',
        computed:{
            totalPrice(){
                return this.$store.state.totalPrice;
            }
        }
    }
    let store=new Vuex.Store({
        state:{
            totalPrice:100
        }
    })
    var app=new Vue({
        el:'#hd',
        store,
        data:{

        },
        components:{
            lists:lists
        }
    })
</script>
</body>
</html>